import React, { useState } from 'react'
import { Outlet,useNavigate } from 'react-router-dom'
import { Tabbar } from '@nutui/nutui-react'
import { Home, User, ToReceive, } from '@nutui/icons-react'
function Index() {
    const navigator = useNavigate()
    const [tabbarValue, setTabbarValue] = useState(0)
    const handleNavgator = (path, index) => { navigator(path); setTabbarValue(index) }//操纵tabar变化
    return (
        <div className="App">
            <main>
                <Outlet />
            </main>
            <Tabbar fixed defaultValue={0} value={tabbarValue}>
                <Tabbar.Item title="首页" icon={<Home width={18} height={18} />} onClick={() => handleNavgator("/index/home", 0)} />
                <Tabbar.Item title="明厨亮灶" icon={<ToReceive width={18} height={18} />} onClick={() => handleNavgator("/index/kitchen", 1)} />
                <Tabbar.Item title="我的" icon={<User width={18} height={18} />} onClick={() => handleNavgator("/index/mine", 2)} />
            </Tabbar>
        </div>
    );
}

export default Index;